<template>
  <div>
    <div id="hotTable" class="hotTable">
      <!-- <div class="wrapper">
        <HotTable ref="testHot" :settings="hotSettings"></HotTable>
      </div>-->
      <div class="overf" :style="{height:a}">
        <div class="wrapper">
          <HotTable ref="testHot" :settings="hotSettings"></HotTable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { HotTable } from "@handsontable-pro/vue";
import "../../../node_modules/handsontable-pro/dist/handsontable.full.css";
import Handsontable from "handsontable-pro";
import tools from "../../utils";
export default {
  name: "likeExcel",
  components: {
    HotTable
  },
  props: {
    excelData: {
      type: Array,
      default() {
        return [];
      }
    },
    excelHeaders: {
      type: Array,
      default() {
        return [];
      }
    },
    maxLength: {
      type: Number,
      default: 9999
    },
    supplierSource: {
      type: Array,
      default() {
        return [];
      }
    },
    dataSource: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      a: "500px",
      self: "",
      templeHeaderList: "",
      root: "test-hot",
      allData: [],
      hotSettings: {
        maxCols: this.maxCols, //最大列数
        data: this.excelData,
        maxRows: this.maxLength,
        rowHeaders: true,
        autoColumnSize: true,
        manualColumnResize: true,
        licenseKey: "",
        stretchH: "all",
        fillHandle: true, //选中拖拽复制
        rowHeights: 40,
        columnHeaderHeight: 40,
        className: "first",
        colHeaders: this.excelHeaders,
        columns: this.dataSource,
        cells: function(row, column) {
          var cellMeta = {};
          return cellMeta;
        },
        afterChange: function(changes, source) {
          self = this;
        }
      }
    };
  },
  created() {
    this.hotSettings.licenseKey = tools.genKey(null, 100);
  },
  mounted() {
    this.a = document.documentElement.clientHeight - 152 + "px";
  },
  methods: {
    saveData() {
      this.allData = self.getSourceData();
    }
  }
};
</script>

<style>
.first th,
.first td {
  max-width: 200px;
  max-height: 200px;
}

.first th {
  line-height: 40px;
}

.overf {
  width: 100%;
  /* height: 600px; */
  overflow: hidden;
}

.wrapper {
  overflow: auto;
  width: 100%;
  height: 100%;
}

.handsontable th,
.handsontable td {
  vertical-align: middle;
  text-align: center;
}
</style>
